<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>重置密码</title>
	<!--<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">-->
	<!--本地CSS-->
	<link rel="stylesheet" href="css/index.css">
	<link rel="stylesheet" href="css/element.css">
	<style>
		body {
			background: linear-gradient(135deg, #74ebd5 0%, #ACB6E5 100%); /* 渐变色 */
			height: 100vh;
			margin: 0;
			display: flex;
			justify-content: center;
			align-items: center;
			overflow: hidden;
		}
		.login-container {
			width: 350px;
			padding: 20px;
			background-color: rgba(255, 255, 255, 0.8);
			border-radius: 5px;
			box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
		}
	</style>
</head>
<body>
<div id="app" class="login-container">
	<el-form :model="form" ref="loginForm" label-width="80px" class="demo-ruleForm login-form">
		<el-form-item label="邮箱" prop="email">
			<el-input v-model="form.email" placeholder="请输入邮箱"></el-input>
		</el-form-item>
		<el-form-item>
			<el-button type="primary" @click="sendVerificationCode">发送验证码</el-button>
		</el-form-item>
		<el-form-item label="验证码" prop="code">
			<el-input v-model="form.code" placeholder="请输入验证码"></el-input>
		</el-form-item>
		<el-form-item label="新密码" prop="password">
			<el-input type="password" v-model="form.password" placeholder="请输入新密码"></el-input>
		</el-form-item>
		<el-form-item>
			<el-button type="primary" @click="resetPassword">重置密码</el-button>
			<el-button @click="goToLogin">返回登录</el-button>
		</el-form-item>
	</el-form>
</div>

<!-- 引入 Vue 和 Element UI -->
<script src="js/vue.min.js"></script>
<script src="js/element.js"></script>
<script>
	new Vue({
		el: '#app',
		data() {
			return {
				form: {
					email: '',
					code: '',
					password: ''
				}
			};
		},
		methods: {
			sendVerificationCode() {
				// 这里添加发送验证码的逻辑
				this.$message({
					message: '验证码已发送',
					type: 'success'
				});
			},
			resetPassword() {
				// 这里添加重置密码的逻辑
				this.$message({
					message: '密码重置成功',
					type: 'success'
				});
			},
			goToLogin() {
				window.location.href = 'index.html';
			}
		}
	});
</script>
</body>
</html>